<template>
    <div>
        <div>
            <div class="masthead">
                <div class="title-row">
                    <div class="title">Natural Language Processing</div>
                </div>
                <div class="title-row">
                    <h2>简洁、高效的自然语言技术展示框架，让NLP开发更迅速、简单</h2>
                </div>
                <div class="title-row">
                    <el-button type="primary">开发文档(v0.0.1)</el-button>
                </div>
            </div>
        </div>

        <div class="section">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>功能介绍</span>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <el-row :gutter="30">
                    <el-col :span="6" v-for="(feature, index) in features" :key="index">
                        <el-card :body-style="{ padding: '0' }">
                            <img src="../assets/images/feature-1.png" class="image" />
                            <div style="padding: 14px;">
                                <h5>{{ feature.title }}</h5>
                                <div>
                                    <div>{{ feature.text }}</div>
                                    <el-button type="text">操作按钮</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <div class="section">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>关于我们</span>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <p>{{ about_us }}</p>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            about_us:
                "项目组成员来自武汉大学计算机学院，长期专注于自然语言处理、信息检索、网络传播等方面的研究.近五年来，主持了相关领域的中国国家自然科学基金项目3项、国家和省部市级科技计划项目共计12项. 近五年发表与本研究紧密相关的SCI/EI/ISTP/核心论文共计101篇，其中SCI25篇、CCF和通信领域C类以上会议论文19篇，参编著作2部；授权国家发明专利和软件著作权7项；获得湖北省科技进步一等奖和自然科学二等奖各1项、国际会议最佳论文奖1项.",
            features: [
                {
                    image: "../assets/images/feature-1.png",
                    title: "自动问答",
                    text:
                        "多意图识别计划在语音识别后的无标点文本中自动加入标点信息，划分句子边界，使得处理后的文本便于阅读理解和意图识别",
                    more_url: "https://whu.edu.cn"
                },
                {
                    image: "../assets/images/feature-1.png",
                    title: "自动问答",
                    text:
                        "多意图识别计划在语音识别后的无标点文本中自动加入标点信息，划分句子边界，使得处理后的文本便于阅读理解和意图识别",
                    more_url: "https://whu.edu.cn"
                },
                {
                    image: "../assets/images/feature-1.png",
                    title: "自动问答",
                    text:
                        "多意图识别计划在语音识别后的无标点文本中自动加入标点信息，划分句子边界，使得处理后的文本便于阅读理解和意图识别",
                    more_url: "https://whu.edu.cn"
                },
                {
                    image: "../assets/images/feature-1.png",
                    title: "自动问答",
                    text:
                        "多意图识别计划在语音识别后的无标点文本中自动加入标点信息，划分句子边界，使得处理后的文本便于阅读理解和意图识别",
                    more_url: "https://whu.edu.cn"
                }
            ]
        };
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.masthead {
    padding: 80px 20px 80px 20px;
    background: linear-gradient(45deg, #020031, #d733ff);
    color: #fff;
    line-height: 30px;
}

.title {
    font-size: 38pt;
    padding-bottom: 10px;
}

.title-row {
    padding-top: 5px;
}

.section {
    padding: 10px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}
</style>
